HTML5の新しいinputタイプと便利な属性

HTML5 Formsとは

HTML5では従来のinputタイプに加え、新たなinputタイプの追加やrequired、placeholder、autocomplete、validateなどが可能になりました。

現在HTML5 Formsの実装はブラウザによって異なります。

サンプル

Type属性

<form method="post" action="#">
	<ul>
 		<li>電話番号：<input type="tel" name="tel" id="tel" required /></li>
 		<li>検索：<input type="search" name="search" id="search" required /></li>
 		<li>URL：<input type="url" name="url" id="url" required /></li>
 		<li>メールアドレス：<input type="email" name="email" id="email" required /></li>
 		<li>日時<input type="datetime" name="datetime" id="datetime" required /></li>
 		<li>日付<input type="date" name="date" id="date" required /></li>
 		<li>週<input type="week" name="week" id="month" required /></li>
 		<li>日時（ローカル）<input type="datetime-local" name="datetime-local" id="time" required /></li>
 		<li>スライダー<input type="range" name="number" id="number" /></li>
 		<li>カラー：<input type="color" name="color" id="color" /></li>
 	</ul>
 	<p><input type="submit" value="送信" /></p>
</form>

ページを開いたときにinput要素にフォーカスさせる「autofocus」

<form method="post" action="#">
	<p><input type="text" value="" autofocus /></p>
 	<p><input type="submit" value="送信" /></p>
</form>

必須入力可能にする「required」

<form method="post" action="#">
	<p><input type="text" value="" required /></p>
 	<p><input type="submit" value="送信" /></p>
</form>

入力をサポートするためのラベルを表示する「placeholder」

<form method="post" action="#">
	<p><input type="text" value="" placeholder="キーワード..." required /></p>
 	<p><input type="submit" value="送信" /></p>
</form>

任意のパターンで入力値のチェックが可能になる「pattern」

<form method="post" action="#">
	<p>IPアドレスを入力してください。<br />
	<input type="text" value="" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" placeholder="000.000.000.000" required /></p>
 	<p><input type="submit" value="送信" /></p>
</form>

入力補完が可能になる「autocomplete」

<form method="post" action="#">
	<p>
	<input type="text" value="" autocomplete="on" list="autocompleteList" required />
	<datalist id="autocompleteList">
		<option value="apple">
		<option value="bug">
		<option value="cream">
		<option value="dream">
		<option value="egg">
		<option value="fly">
		<option value="good">
		<option value="happy">
	</datalist>
	</p>
 	<p><input type="submit" value="送信" /></p>
</form>

ブラウザによって対応状況が異なりますがしっかり利用できるようになれば便利ですね。少し古いですが対応状況はこちら。

• Web Forms 2.0

この記事は「Forms」の転載です。